<!-- 腾讯云图片上传 -->
<template>
  <div id="content">
    <input id="file" :ref="id" type="file" :accept="type" multiple="multiple" @change="fileChange">

    <div v-show="uploadList.length+uploadedList.length<limit" id="add" @click="upload">
      <i class="el-icon-plus avatar-uploader-icon" />
    </div>
    <div v-for="item in uploadedList" :key="item.url" class="uploaded">
      <!-- image/png,image/jpeg / image.*-->
      <img v-show="type.indexOf('image')>-1&&type.indexOf('text')==-1" :src="item.url">
      <div v-show="type.indexOf('image')>-1&&type.indexOf('text')==-1" class="delete_img" @click="remove(item.url)">
        <i class="el-icon-delete" />
      </div>
      <!-- audio/mpeg,audio/ogg,audio/wav -->
      <audio v-show="type.indexOf('audio')>-1" :src="item.url" controls />
      <div v-show="type.indexOf('audio')>-1" class="delete_aduio" @click="remove(item.url)">
        <i class="el-icon-delete" />
      </div>
      <!-- video/mp4,video/webm,video/ogg -->
      <video v-show="type.indexOf('video')>-1" :src="item.url" controls />
      <i v-show="type.indexOf('video')>-1" class="el-icon-delete delete_video" @click="remove(item.url)" />
      <!-- text/plain,text/html -->
      <el-link v-show="type.indexOf('text')>-1||type.indexOf('application')>-1" :href="item.url" type="success" target="_Blank">
        {{ item.url.slice(item.url.lastIndexOf('/')+1) }}
      </el-link>
      <i v-show="type.indexOf('text')>-1||type.indexOf('application')>-1" class="el-icon-delete" @click="remove(item.url)" />
    </div>

    <div v-for="item in uploadList" :key="item.url" class="upload">
      <!-- image/png,image/jpeg / image.*-->
      <img v-show="type.indexOf('image')>-1&&type.indexOf('text')==-1" :src="item.url">
      <div v-show="type.indexOf('image')>-1&&type.indexOf('text')==-1" class="delete_img" @click="remove(item.url)">
        <i class="el-icon-delete" />
      </div>
      <!-- audio/mpeg,audio/ogg,audio/wav -->
      <audio v-show="type.indexOf('audio')>-1" :src="item.url" controls />
      <div v-show="type.indexOf('audio')>-1" class="delete_aduio" @click="remove(item.url)">
        <i class="el-icon-delete" />
      </div>
      <!-- video/mp4,video/webm,video/ogg -->
      <video v-show="type.indexOf('video')>-1" :src="item.url" controls />
      <i v-show="type.indexOf('video')>-1" class="el-icon-delete delete_video" @click="remove(item.url)" />
      <!-- text/plain,text/html -->
      <el-link v-show="type.indexOf('text')>-1||type.indexOf('application')>-1" :href="item.url" type="primary" target="_Blank">
        <!-- {{ item.url.slice(item.url.lastIndexOf('/')+1) }} -->
        {{ item.file.name }}
      </el-link>
      <i v-show="type.indexOf('text')>-1||type.indexOf('application')>-1" class="el-icon-delete" @click="remove(item.url)" />
    </div>
  </div>
</template>
<script>
import { uuid } from 'uuidv4'
export default {
  name: 'LoonUpload',
  props: ['type', 'folder', 'limit', 'size'],
  data() {
    return {
      id: '',
      // 暂存队列
      uploadList: [],
      // 已存队列
      uploadedList: []
    }
  },
  mounted() {
    this.id = uuid()
  },
  methods: {
    upload() {
      this.$refs[this.id].click()
    },
    isNull() {
      return this.uploadList.length + this.uploadedList.length == 0
    },
    uploadFile() {
      return new Promise(async resolve => {
        console.log('111111111111111111111')
        // 已上传数据
        var result = []
        this.uploadedList.forEach((item) => {
          result.push(item.url.replace(/^http[s]?:\/\/([\d\w-\.:]+)(\/.+)$/, '$2'))
        })
        // 上传
        const urlArray = await this.play.submitFilesCOS(this.uploadList, this.folder)
        urlArray.forEach(item => {
          result.push(item)
        })
        resolve(result)
      })
    },
    reset(urlArray) {
      this.uploadList = []
      this.uploadedList = urlArray
      this.$forceUpdate()
    },
    fileChange() {
      const uploadLength = this.uploadList.length
      const uploadedLength = this.uploadedList.length
      const canUploadCount = this.limit - uploadLength - uploadedLength
      const files = this.$refs[this.id].files
      const fileLength = files.length
      for (let i = 0; i < fileLength; i++) {
        // 超过文件上传限制
        if (i > canUploadCount - 1) {
          return
        }
        // 超过文件限制大小
        if (this.size == undefined || files[i].size <= this.size) {
          // 生成预览图片
          const url = window.URL.createObjectURL(files[i])
          this.uploadList.push({ url: url, file: files[i] })
        } else {
          this.$message.error('文件大小超过' + this.size / 1024 / 1024 + 'M')
        }
      }
      // 清空DOM里的文件
      this.$refs[this.id].value = ''
    },
    remove(url) {
      this.uploadList = this.uploadList.filter(item => {
        if (item.url != url) {
          return item
        }
      })
      this.uploadedList = this.uploadedList.filter(item => {
        if (item.url != url) {
          return item
        }
      })
      // 结束了清除掉不必要的资源
      window.URL.revokeObjectURL(url)
    }
  }
}
</script>
<style lang="scss" scoped>
    #content{
        width: max-content;
        height: max-content;
        #file{
            display: none;
        }
        #add{
            width: 100px;
            height: 100px;
            line-height: 100px;
            border-radius: 10px;
            text-align: center;
            margin-left: 2px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            border: 1px dashed #c0ccda;
            margin: 5px;
        }
        #add:hover{
            color: #409EFF;
            border-color:#409EFF;
        }
        img{
            width: 100px;
            height: 100px;
            margin: 5px;
            border-radius: 10px;
        }
        video{
            min-width: 200px;
            max-width: 200px;
            height: 150px;
            border: 1px solid;
            border-radius: 8px;
        }
        .delete_img{
            width: 100px;
            height: 100px;
            margin: 5px;
            display: none;
        }
        .delete_aduio{
            line-height: 54px;
        }
        .delete_video{
            height: 20px;
            position: relative;
            right: 20px;
            top: 4px;
        }
        .upload:hover>.delete_img{
            display: block;
            color: #fff;
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            position: absolute;
            background: rgba(0,0,0,.5);
        }
        .uploaded:hover>.delete_img{
            display: block;
            color: #fff;
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            position: absolute;
            background: rgba(0,0,0,.5);
        }
        .upload{
            display: flex;
            width: max-content;
            height: max-content;
            align-items: center;
            justify-content: space-between;
        }
        .uploaded{
            display: flex;
            width: max-content;
            height: max-content;
            align-items: center;
            justify-content: space-between;
        }
        a{
            width: 100px;
            overflow: hidden;
            white-space: nowrap;
        }
    }
</style>
